<template>
  <div class="content-card">
    <div class="item">
      <span class="label">{{ "目录总量" }}</span>
      <div class="value">
        <img src="@/assets/img/directories/1-1.jpg" alt="1-1" />
        <span> {{ dirSumNum }} </span>
      </div>
    </div>
    <div class="item">
      <span class="label">{{ "事项总量" }}</span>
      <div class="value">
        <img src="@/assets/img/directories/1-2.jpg" alt="1-2" />
        <span> {{ eventsNum }} </span>
      </div>
    </div>
    <div class="item">
      <span class="label">{{ "办结累计数" }}</span>
      <div class="value">
        <img src="@/assets/img/directories/1-3.jpg" alt="1-3" />
        <span> {{ resultNum }} </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "i1-card",
  props: {
    dirSumNum: {
      type: Number,
      default: 0,
    },
    eventsNum: {
      type: Number,
      default: 0,
    },
    resultNum: {
      type: Number,
      default: 0,
    },
  },
};
</script>

<style lang="less" scoped>
.content-card {
  width: 100%;
  height: 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  padding: 10px 5px;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    .label {
      font-size: 14px;
      font-weight: 550;
      margin-bottom: 10px;
    }
    .value {
      display: flex;
      justify-content: center;
      font-size: 16px;
      img {
        margin-right: 6px;
        width: 24px;
        height: 24px;
      }
      span {
        font-size: 18px;
        font-weight: 550;
      }
    }
    &:nth-child(1) {
      .value {
        span {
          color: #00df91;
        }
      }
    }
    &:nth-child(2) {
      border-left: 1px solid #eee;
      .value {
        span {
          color: #faae62;
        }
      }
    }
    &:nth-child(3) {
      border-left: 1px solid #eee;
      .value {
        span {
          color: #3695ff;
        }
      }
    }
  }
}
</style>
